﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>赛马牛的博客</title>
        <!--移动端设置-->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta property="qc:admins" content="171255133211636" />
        <meta name="keywords" content="赛马牛的博客,赛马牛,牛马博客，博客,技术博客,个人博客,blog" />
        <meta name="description" content="赛马牛的博客，分享个人生活、理想和技术的博客" />
        <meta name="author" content="赛马牛,Dennis Wong,1656239759@qq.com">
        <link rel="stylesheet" href="/static/css/iconfont.css">
        <link rel="stylesheet" type="text/css" href="/static/css/common.css"/>
        <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>

        <script src="/static/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="/static/js/index.js" type="text/javascript" charset="utf-8" defer="defer"></script>
        <style>
            .b-page {
                background: #fff;
                box-shadow: 0px 1px 2px 0px #E2E2E2;
            }
            .page {
                width: 100%;
                padding-bottom: 20px;
                /*padding: 30px 15px;*/
                /*background: #FFF;*/
                text-align: right;
                overflow: hidden;
            }
            .page .first,
            .page .prev,
            .page .current,
            .page .num,
            .page .current,
            .page .next,
            .page .end {
                padding: 8px 16px;
                margin: 0px 5px;
                display: inline-block;
                color: #D9534F;
                border: 1px solid #F2F2F2;
                border-radius: 5px;
            }
            .page .first:hover,
            .page .prev:hover,
            .page .current:hover,
            .page .num:hover,
            .page .current:hover,
            .page .next:hover,
            .page .end:hover {
                text-decoration: none;
                /*background: #BF3B37;*/
                /*color: #fff;*/
                font-weight: 800;
            }
            .page .current {
                background-color: #D9534F;
                color: #FFF;
                border-radius: 5px;
                border: 1px solid #D9534F;
            }
            .page .current:hover {
                text-decoration: none;
                background: #D9534F;
                font-weight: 400;
            }
            .page .not-allowed {
                cursor: not-allowed;
            }
            #to-top{
                text-align: center;
                display: none;
                width: 50px;
                height: 50px;
                /*background: url('images/to-top.png') no-repeat;*/
                background: #D9534F;
                border-radius: 50%;
                position: fixed;
                bottom: 50px;
                right: 50px;
                transition: all 1s;
                -webkit-transition:all 1s;
                -moz-transition:all 1s;
                -o-transition:all 1s;
                cursor: pointer;
            }
            #to-top .to-top{
                font-weight: 600;
                line-height: 48px;
                font-size: 40px;
            }
            #to-top:hover{
                /*transform: rotateY(360deg);
                -webkit-transform: rotateY(360deg);
                -moz-transform: rotateY(360deg);
                -o-transform: rotateY(360deg);*/
                opacity: .7;
            }
        </style>
    </head>
    <body>
    <!--头部-->
        <script type="text/javascript">
            $(function () {
                $('main').css({'margin-top' : $('header').height() + 'px'});
            })
        </script>
        <header>
            <div class="w100">
                <nav>
                    <div class="container nav-box">
                        <div id="logo">
                            <a href="/" style="display: flex;"><img src="/static/images/logo.png" alt="" /></a>
                        </div>
                        <ul class="big-nav">
                            <li th:class="${categoryId == 0} ? 'bg-red'">
                                <a href="/">首页</a>
                            </li>
                            <li th:each="item,key:${categoryList}" th:style="${key.index > 10} ? 'display: none;'" th:class="${categoryId == item.id} ? 'bg-red'">
                                <a th:href="'/?c=' + @{(${item.id})}" th:text="${item.title}"></a>
                            </li>
                        </ul>

                        <div class="nav-toggle">
                            <i class="icon iconfont">&#xe696;</i>
                        </div>
                    </div>
                    <div class="nav-display-box">
                        <ul class="first-ul">
                            <li th:class="${categoryId == 0} ? 'bg-red'">
                                <a href="/">首页</a>
                            </li>

                            <li th:each="item,key:${categoryList}" th:style="${key.index > 12} ? 'display: none;'" th:class="${categoryId == item.id} ? 'bg-red'">
                                <a th:href="'/?c=' + @{(${item.id})}" th:text="${item.title}"></a>
                            </li>
                        </ul>
                    </div>

                </nav>
            </div>
        </header>
        <!--头部结束-->


        <!--主体-->
        <main>
            <div class="container">
                <!--文章-->
                <div class="w66 left">
                    <article>
                        <block class="article">

                            <!-- 首页文章 -->
                            <block name="index_art">
                                <div class="border" th:each="item:${pageInfo.list}">
                                    <section>
                                        <h1 th:text="${item.title}"></h1>
                                        <div class="tips">
                                            <span th:if="${item.label_id != null}" class="btn-black btn  tip">
                                                <i class="icon iconfont">&#xe6c5;</i>
                                                <a th:href="'/?l=' + @{(${item.label_id})}" target="_block" th:text="${item.label_title}"></a>
                                            </span>
                                            <span class="con-time" style="padding: 0 10px;" th:text="'发表时间：' + @{(${item.create_at})}"></span>
                                            <span class="con-author">作者：赛马牛</span>
                                           <!--  <span class="con-click" style="padding-left: 10px;">浏览次数：58</span> -->
                                        </div>
                                        <div class="box-content">
                                            <p class="content arc" th:text="${item.describe}"></p>
                                        </div>
                                        <a th:if="${item.type == 1}" th:href="@{/detail(id=${item.id})}" class="btn btn-more read-more" target="_black">
                                            阅读更多
                                            <span class="read" th:text="${item.total_pv}"></span>
                                        </a>
                                        <a th:if="${item.type == 2}" th:href="${item.link}" class="btn btn-more read-more" target="_black">
                                            阅读更多
                                            <span class="read" th:text="${item.total_pv}"></span>
                                        </a>
                                    </section>
                                </div>

                                <!-- 首页文章结束 -->
                                <!--分页-->
                                <div class="" th:if="${pageInfo.total > 0}">
                                    <section>
                                        <div class="page">
                                            <a class="first" th:if="${pageInfo.pageNum > 1}" th:href="@{/(page=1,l=${labelId}, c=${categoryId})}">首页</a>
                                            <a class="prev" th:if="${pageInfo.pageNum > 1}" th:href="@{/(page=${pageInfo.pageNum - 1}, l=${labelId}, c=${categoryId})}">上一页</a>
                                            <a class="num" th:if="${pageInfo.pageNum - 2 > 0}" th:href="@{/(page=${pageInfo.pageNum - 2}, l=${labelId}, c=${categoryId}})}" th:text="${pageInfo.pageNum - 2}"></a>
                                            <a class="num" th:if="${pageInfo.pageNum - 1 > 0}" th:href="@{/(page=${pageInfo.pageNum - 1}, l=${labelId}), c=${categoryId}}" th:text="${pageInfo.pageNum - 1}"></a>
                                            <span class="current" th:text="${pageInfo.pageNum}"></span><!--当前页-->
                                            <a class="num" th:if="${pageInfo.pageNum + 1 <= pageInfo.pages}" th:href="@{/(page=${pageInfo.pageNum + 1}, l=${labelId}, c=${categoryId})}" th:text="${pageInfo.pageNum + 1}"></a>
                                            <a class="num" th:if="${pageInfo.pageNum + 2 <= pageInfo.pages}" th:href="@{/(page=${pageInfo.pageNum + 2}, l=${labelId}, c=${categoryId})}" th:text="${pageInfo.pageNum + 2}"></a>
                                            <a class="next" th:if="${pageInfo.pageNum < pageInfo.pages}" th:href="@{/(page=${pageInfo.pageNum + 1}, l=${labelId}, c=${categoryId})}">下一页</a>
                                            <a class="end" th:if="${pageInfo.pageNum < pageInfo.pages}" th:href="@{/(page=${pageInfo.pages - 1}, l=${labelId}, c=${categoryId})}">末页</a>
                                            <span class="rows" th:text="'共 ' +@{(${pageInfo.total})} + ' 条记录'"></span>
                                        </div>
                                    </section>
                                </div>
                                <!--分页结束-->

                            </block>
                    </article>
                </div>
                <!--文章结束-->
             <!--右侧-->
                <div class="right w33">
                    <asid>
                        <div class="">
                            <!--标签-->
                            <div class="border tags-cloud">
                                <section>
                                    <ul class="nav-pills">
                                        <li><a href="javascript:;">最新文章</a></li>
                                    </ul>
                                    <div class="bottom">
                                        <div id="" class="tags-cloud-show link">
                                            <ul>
                                                <li th:each="item:${newestSixArticleList.list}">
                                                    <a th:if="${item.type == 1}" th:href="'/detail?id=' + ${item.id}" target="_block" th:text="${item.title}"></a>
                                                    <a th:if="${item.type == 2}" th:href="${item.link}" target="_block" th:text="${item.title}"></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </section>
                            </div>
                            <!--标签结束-->
                            <!--标签-->
                            <div class="border tags-cloud">
                                <section>
                                    <ul class="nav-pills">
                                        <li><a href="javascript:;">热门标签</a></li>
                                    </ul>
                                    <div class="bottom">
                                        <div id="" class="tags-cloud-show tag">

                                            <a th:each="item:${recommendLabelList}" th:href="'/?l=' + @{(${item.id})}" class="btn btn-read" style="font-size:12px;margin-right:20px;margin-bottom:10px;" th:text="@{(${item.title})} + '(' + @{(${item.article_count})} + ')'"></a>

                                        </div>
                                    </div>
                                </section>
                            </div>
                            <!--标签结束-->
                            <!--友情链接-->
                            <div class="border tags-cloud">
                                <section>
                                    <ul class="nav-pills">
                                        <li><a href="javascript:;">友情链接</a></li>
                                    </ul>
                                    <div class="bottom">
                                        <div id="" class="tags-cloud-show link">
                                            <ul>
                                                <li th:each="item:${friendsLinkList}"><a th:href="${item.link}" target="_block" th:text="${item.name}"></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </section>
                            </div>
                            <!--友情链接结束-->
                        </div>
                    </asid>
                </div>
                <!--右侧结束-->
            </div>
        </main>
        <!--主体结束-->
        <!--底部-->
        <div th:replace="client/common/footer::footer"></div>
        <script>
            $(window).ready(function() {
                if ($('footer').offset().top < $(window).height()) {
                    $('footer').addClass('footer-to-low');
                }
            })
        </script>
    </body>
</html>